<template>
    <el-form :model="noticForm" ref="noticForm" label-width="70px" :inline="true">
        <el-row v-for="(noticItem, index) in noticForm.noticConfig" :key="index">
            <el-col :span="10" v-for="(nameItem, index) in noticItem.name" :key="nameItem.key">
                <el-form-item prop="name" label="姓名：">
                    <el-input v-model="nameItem.value"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10" v-for="(phoneItem, index) in noticItem.phone" :key="phoneItem.key">
                <el-form-item prop="phone" label="电话：">
                    <el-input v-model="phoneItem.value"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="4"><el-button @click.prevent="removeDomain(noticItem)">删除</el-button>
            </el-col>
        </el-row>
        <el-form-item style="width: 100%; text-align: center">
            <el-button type="primary" @click="submitForm('noticForm')">提交</el-button>
            <el-button @click="addDomain">新增</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    //   name: "Secondry",
    data() {
        return {
            //data
            noticForm: {
                noticConfig: [
                    {
                        name: [
                            {
                                value: "",
                            },
                        ],
                        phone: [
                            {
                                value: "",
                            },
                        ],
                    },
                ],
            },


        }
    },
    methods: {
        submitForm() {
            console.log(JSON.stringify(this.noticForm));
        },

        // 新增
        removeDomain(item) {
            var index = this.noticForm.noticConfig.indexOf(item);
            if (index == "0") {
                // 还有一个的时候提示不能删除
                this.$message({
                    message: "不能删除了",
                    type: "error",
                });
                return false;
            }
            if (index !== -1 && index !== "0") {
                this.noticForm.noticConfig.splice(index, 1);
            }
        },
        // 表单新增
        addDomain() {
            this.noticForm.noticConfig.push({
                name: [
                    {
                        value: "",
                        key: Date.now(),
                    },
                ],
                phone: [
                    {
                        value: "",
                        key: Date.now() + "2",
                    },
                ],
            });
        },

    }
}

</script>




